<template>
	<view class="w-100 bg-white">
		<view class="flex-1 row-ac">
			<view class="user-img ml-5">
				<image :src="userInfo.head_image" mode=""></image>
			</view>
			<view class="flex-1 ml-7">
				<view class="font-s-5" v-if="userInfo.identity_name">
					<view class="text-light-grey font-s-3">身份</view>
					<view class="mt-1">{{ userInfo.identity_name }}</view>
				</view>
				<view class="font-s-4 mt-2 row-ac">
					<view class="text-light-grey">姓名</view>
					<view class="ml-2">{{ userInfo.last_name || userInfo.nickname || userInfo.username }}</view>
				</view>
				<view class="font-s-4 mt-2 row-ac">
					<view class="text-light-grey">身份</view>
					<view class="ml-2">{{ useridentity.identity_name }}</view>
				</view>
				<view class="font-s-4 mt-2 row-ac">
					<view class="text-light-grey">上级</view>
					<view class="ml-2">{{ distributors.leader_nickname || distributors.leader_name }}</view>
				</view>
			</view>
		</view>
		<view class="flex-1 row-a-j-fc mt-9">
			<view class="font-s-4 font-w">邀请二维码</view>
			<view class="code-img mt-5">
				<image :src="mkqrcode" mode="widthFix"></image>
			</view>
			<view class="font-s-4 mt-3 ">截图保存二维码</view>
		</view>
	</view>
</template>

<script>
	import {
		userInfoUrl,
		usermkqrcodeUrl,
		useridentityDetailUrl,
		distributorsDetailUrl
	} from '@/api/index.js';
	import {
		nowFormatTime,
	} from '@/utils/time.js';
	export default {
		data() {
			return {
				userInfo: '',
				mkqrcode: '',
				distributors:'',
				useridentity:''
			}
		},
		filters: {
			phoneFilter(val) {
				let reg = /^(.{3}).*(.{4})$/;
				return val.replace(reg, "$1****$2");
			},
		},
		mounted() {
			this.token = uni.getStorageSync('token')
			if (this.token != '') {
				this.loginStatus = true
				this.getUserInfo()
				this.getUsermkqrCode()
				this.getDistributorsDetail()
				this.getUseridentityDetail()
			} else {
				this.loginStatus = false
			}
		},
		methods: {
			getUserInfo() {
				this.$R.get(userInfoUrl).then(res => {
					this.userInfo = res.data
					this.userInfo.date_joined = nowFormatTime(res.data.date_joined)
				})
			},
			getUsermkqrCode() {
				this.$R.get(usermkqrcodeUrl).then(res => {
					this.mkqrcode = res.qr_image
				})
			},
			getUseridentityDetail() {
				this.$R.get(useridentityDetailUrl).then(res => {
					this.useridentity = res.data
				})
			},
			getDistributorsDetail() {
				this.$R.get(distributorsDetailUrl).then(res => {
					this.distributors = res.data
					console.log(this.distributors);
				})
			},
			saveImage() {
				let base64 = this.mkqrcode;
				const bitmap = new plus.nativeObj.Bitmap("base64");
				bitmap.loadBase64Data(base64, function() {
					const url = "_doc/" + new Date().getTime() + ".png";
					console.log('saveHeadImgFile', url)
					bitmap.save(url, {
						overwrite: true, // 是否覆盖
						// quality: 'quality'  // 图片清晰度
					}, (i) => {
						uni.saveImageToPhotosAlbum({
							filePath: url,
							success: function() {
								setTimeout(() => {
									uni.showToast({
										title: '图片保存成功',
										icon: 'none'
									})
								}, 400);
								bitmap.clear()
							}
						});
					}, (e) => {
						uni.showToast({
							title: '图片保存失败',
							icon: 'none'
						})
						bitmap.clear()
					});
				}, (e) => {
					uni.showToast({
						title: '图片保存失败',
						icon: 'none'
					})
					bitmap.clear()
				});
			},
			vxSaveImage() {
				uni.getSetting({ //获取用户的当前设置
					success: (res) => {
						if (res.authSetting['scope.writePhotosAlbum']) { //验证用户是否授权可以访问相册
							this.saveImageToPhotosAlbum();
						} else {
							uni.authorize({ //如果没有授权，向用户发起请求
								scope: 'scope.writePhotosAlbum',
								success: () => {
									this.saveImageToPhotosAlbum();
								},
								fail: () => {
									uni.showToast({
										title: "请打开保存相册权限，再点击保存图片",
										icon: "none",
										duration: 3000
									});
									setTimeout(() => {
										uni.openSetting({ //调起客户端小程序设置界面,让用户开启访问相册
											success: (res2) => {
												// console.log(res2.authSetting)
											}
										});
									}, 3000);
								}
							})
						}
					}
				})
			},
			saveImageToPhotosAlbum() {
				let base64 = this.mkqrcode.replace(/^data:image\/\w+;base64,/, ""); //去掉data:image/png;base64,
				let filePath = wx.env.USER_DATA_PATH + '/' + this.userInfo.nickname + '.png';
				uni.getFileSystemManager().writeFile({
					filePath: filePath, //创建一个临时文件名
					data: base64, //写入的文本或二进制数据
					encoding: 'base64', //写入当前文件的字符编码
					success: res => {
						uni.saveImageToPhotosAlbum({
							filePath: filePath,
							success: function(res2) {
								uni.showToast({
									title: '保存成功！',
									icon: "none",
									duration: 5000
								})
							},
						})
					},
				})
			},
			toBack() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff !important;
	}

	.promotion-head {
		position: relative;

		.to-back {
			position: absolute;
			top: 90rpx;
			left: 30rpx;
		}

		.promotion-title {
			top: 150rpx;
			right: 90rpx;
			position: absolute;
		}
	}

	.user-img {
		width: 238rpx;
		height: 238rpx;
		border-radius: 50%;
		border: 20rpx solid #D2D2D2;

		image {
			width: 238rpx;
			height: 238rpx;
			border-radius: 50%;
		}
	}

	.code-img {
		width: 380rpx;
		height: 380rpx;
	}

	.head-image {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;

		image {
			width: 72rpx;
			height: 72rpx;
			border-radius: 50%;
		}
	}
</style>